<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* css reset 开始 */
			html,body{height: 100%;overflow: hidden;}
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
			a{text-decoration: none;display: block;}
			li{list-style: none;}
			img{display: block;}
			/* css reset 结束 */
			
			/* 公共样式 开始 */
			.clearfix{*zoom: 1;}
			.clearfix:after{content: "";display: block;clear: both;}
			.commonTitle{color: #009ee0;font-size: 80px;line-height: .8;font-weight: bold;letter-spacing: -5px;}
			/* 公共样式 结束 */
			
			/* 头部样式 开始 */
			#head{background: white !important;width: 100%;}
			#head .headMain{width: 1100px;height: 80px;margin: 0 auto;position: relative;}
			#head .headMain > .logo{float: left;margin-top: 30px;}
			#head .headMain > .nav{float: right;margin-top: 50px;}
			#head .headMain > .nav > .list > li {float: left; margin-left: 40px;position: relative;}
			#head .headMain > .nav > .list > li > a > .up {color: black;position: absolute;width: 0;overflow: hidden;transition: 1s width;}
			#head .headMain > .nav > .list > li:hover .up {width: 100%;}
			#head .headMain > .arrow{width: 21px;height: 11px;background: url(img/menuIndicator.png);position: absolute;left: 50%;bottom: -11px;transition: .5s left;z-index: 1;}
			/* 头部样式 结束 */
			
			/* 内容区域 开始 */
			/*width: 100%;说明使用的是流体布局*/
			#content{height: 300px;background: gray;position: relative;overflow: hidden;width: 100%;}
			#content > .list{position: absolute;left: 0;top: 0;width: 100%;transition: 1s top;}
			/* 
			background-position: 50% 50%; 
			就是让背景图居中铺设
			或者使用 background-position: center;
			这里添加 !important 是为了防止后面的 #content .list > .home{background: url(img/bg1.jpg) no-repeat;} 覆盖
			*/
			#content > .list > li{position: relative;background-position: 50% 50% !important;}
			#content > .list > li > section{width: 1100px;height: 520px;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;}
			#content > .list > .home{background: url(img/bg1.jpg) no-repeat;}
			#content > .list > .course{background: url(img/bg2.jpg) no-repeat;}
			/*第三屏 开始*/
			#content > .list > .works{background: url(img/bg3.jpg) no-repeat;position: relative;}
			/*
			注意这里不能写
			#content > .list > .works > .works1
			这样写因为works和works1之间有一个section会选不到works1
			*/
			#content > .list > .works .works1{margin: 50px 0px 100px 50px;}
			#content > .list > .works .works2{margin-left: 50px;}
			#content > .list > .works .works2 > .item{float: left;width: 220px;height: 133px;margin: 0 1px;position: relative;overflow: hidden;}
			#content > .list > .works .works2 > .item:last-child{width: 332px;}
			/*这里使用box-sizing:border-box，再设置padding，就可以增加内边距。*/
			#content > .list > .works .works2 > .item > .mask{position: absolute;left: 0;right: 0;top: 0;bottom: 0;box-sizing: border-box;padding: 10px;background: #000000;
																opacity: 0;color: white;transition: .5s opacity;}
			#content > .list > .works .works2 > .item > .mask > .icon{width: 32px;height: 34px;background: pink;margin: 10px auto 0;background: url(img/zoomico.png) no-repeat;
																		transition: .3s background-position-y;}
			/*显示同一张图片的不同内容，使用background-position*/
			#content > .list > .works .works2 > .item > .mask > .icon:hover{background-position-y: -35px;}
			#content > .list > .works .works2 > .item:hover .mask{opacity: .8;}
			#content > .list > .works .works2 > .item > img{transition: .3s transform;}
			#content > .list > .works .works2 > .item:hover img{transform: rotateZ(30deg) scale(1.5);}
			/*机器人移动动画*/
			#content > .list > .works .works3{width: 167px;height: 191px;background: url(img/robot.png);position: absolute;left: 900px;top: 170px;
												animation: works3Move 5s linear infinite;}
			/*这里的移动要注意*/
			@keyframes works3Move{
				0%{transform: translateX(0px) rotateY(0deg);}
				49%{transform: translateX(-490px) rotateY(0deg);}
				50%{transform: translateX(-500px) rotateY(180deg);}
				100%{transform: translateX(0px) rotateY(180deg);}
			}
			/*第三屏 结束*/
			#content > .list > .about{background: url(img/bg4.jpg) no-repeat;}
			#content > .list > .team{background: url(img/bg5.jpg) no-repeat;}
			/* 内容区域 结束 */
		</style>
	</head>
	<body>
		<!-- section用来充当视口的 -->
		<section id="wrap">
			<!-- 流体布局 -->
			<header id="head">
				<!-- 固定布局 -->
				<div class="headMain">
					<!-- logo -->
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png" >
						</a>
					</h1>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:;">
									<div class="up"><img src="img/home_gruen.png" ></div>
									<div class="down"><img src="img/home.png" ></div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="down">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="down">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="down">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="down">Team</div>
								</a>
							</li>
						</ul>
					</nav>
								
					<div class="arrow"></div>
				</div>
				
				
			</header>
			<section id="content">
				<ul class="list">
					<li class="home">
						<section>home</section>
					</li>
					<li class="course">
						<section>course</section>
					</li>
					<li class="works">
						<section>
							<header class="works1 commonTitle">
								<span>EINBICK</span> <br>
								<span>ERKENTN</span> <br>
								<span>ERGEBNIS</span> <br>
							</header>
							<div class="works2">
								<div class="item">
									<img src="img/worksimg1.jpg" >
									<div class="mask">
										<span>测试文字 works测试文字 works测试文字 works测试文字 works</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg2.jpg" >
									<div class="mask">
										<span>测试文字 works</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg3.jpg" >
									<div class="mask">
										<span>测试文字 works</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg4.jpg" >
									<div class="mask">
										<span>测试文字 works</span>
										<div class="icon"></div>
									</div>
								</div>
							</div>
							<div class="works3"></div>
						</section>
					</li>
					<li class="about">
						<section>about</section>
					</li>
					<li class="team">
						<section>team</section>
					</li>
				</ul>
			</section>
		</section>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			// 修改导航栏中的arrow的位置
			// 获取箭头的dom元素
			var arrowEl = document.querySelector("#head .headMain > .arrow");
			var liNodes = document.querySelectorAll("#head .headMain > .nav > .list > li");
			var liUpNodes = document.querySelectorAll("#head .headMain > .nav > .list > li > a > .up");
			var firstLiNode = liNodes[0];
			var firstLiUpNode = firstLiNode.querySelector(".up");
			
			var head = document.querySelector("#head");
			var content = document.querySelector("#content");
			var contentLiNodes = document.querySelectorAll("#content .list > li");
			var contentList = document.querySelector("#content .list");
			
			var gIndex = 0;
			var timer;
			
			// 登录网站，默认选中当前项。移动arrow的位置
			arrowEl.style.left = firstLiNode.offsetLeft + firstLiNode.offsetWidth/2 - arrowEl.offsetWidth/2 + "px";
			// 默认选中了第一个li,那么需要动画.这里注意要加双引号
			firstLiUpNode.style.width = "100%";
			
			/*头部的设置*/
			function headBind(){
				for (var i = 0; i < liNodes.length; i++) {
					liNodes[i].index = i;
					liNodes[i].onclick=function(){
						var gIndex = this.index;
						move(this.index)
					}
				}
			}
			/*内容区 开始*/
			function contentBind(){
				var temp = document.documentElement.clientHeight - head.offsetHeight + "px";
				// document.documentElement.clientHeight 是当前视口
				content.style.height = temp;
				for (var i = 0; i < contentLiNodes.length; i++) {
					contentLiNodes[i].style.height = temp;
				}
			}
			function fn(ev){
				ev = ev||event;
				var dir="";
				var length = liNodes.length-1;
				
				if(ev.wheelDelta){
					dir = ev.wheelDelta>0 ? "up":"down";
				}else if(ev.detail){
					dir = ev.detail<0 ? "up":"down";
				}
				
				// console.log(dir);
				
				switch (dir){
					case "up":
						if(gIndex>0){
							gIndex--;
							move(gIndex);
						}
						break;
					case "down":
						if(gIndex<length){
							gIndex++;
							move(gIndex);
						}
						break;
					default:
						break;
				}
			}
			/*
			如果频繁的滑动鼠标滚轮，那么页面切换太频繁影响体验。
			需要设置间隔时间
			*/
			function timeSettings(callbackFunc,ev){
				clearTimeout(timer);
				timer = setTimeout(function(){
					callbackFunc(ev);
				},300);
			}
			function contentScroll(){
				function tempFn(ev){
					timeSettings(fn,ev);
				}
				
				if(content.addEventListener) {
					content.addEventListener("DOMMouseScroll",tempFn)
				}
				content.onmousewheel=tempFn;
			}
			/*内容区 结束*/
			function move(index){
				index = index || gIndex;
				// liUpNodes[i] 注意,这里这样写是获取不到upnodes的,比如我要点第一个li下的up,但是i因为for循环已经到最后一个了.
				var up = liUpNodes[index]
				var li = liNodes[index]
				
				// 其他导航节点恢复原样
				for (var i = 0; i < liUpNodes.length; i++) {
					// 为什么教程这里这样写: liUpNodes[i].style.width=""; 而不是 liUpNodes[i].style.width="0";
					// 因为这样写,hover中style的样式权重比默认的要高,并且为0.那么会影响后面的动画.
					liUpNodes[i].style.width="";
				}
				
				// 移动arrow的动画
				arrowEl.style.left = li.offsetLeft + li.offsetWidth/2 - arrowEl.offsetWidth/2 + "px";
				// 移动字体黑色的部分,渐变颜色.
				up.style.width = "100%";
				
				// 移动内容区的 top 偏移量
				contentList.style.top = -index * (document.documentElement.clientHeight - head.offsetHeight) + "px";
			}
			
			headBind();
			contentBind();
			contentScroll()
			move(2)
			
			window.onresize=function(){
				move();
				contentBind();
			}
		}
	</script>
</html>
